<script>
export default {
    name: "HTab",
    props: {
      index: {
        type: [String, Number],
        required: true,
      },
      label: {
        type: String
      }
    },
    mounted () {
    },
    render(h)  {
      const tab = this.$slots.label || h('span',this.label)  // 如果用name=label的slot,则用slot,否则展示label prop
      return h(
        'li', 
        {
          class: this.classes,
          on: {
            click: this.activeCurTab
          }
        },[ tab ]
      )
    },
    computed: {
      active() {
        return this.index === this.$parent.activeKey
      },
      classes() {
        return ['tabs-item', 'item-link' ,this.active? 'active': '']
      } 
    },
    methods: {
      activeCurTab() {
        this.$parent.handleTabClick(this.index)
      }
    }
}
</script>